import React from 'react';
import { observer } from 'mobx-react';
import { RightReplyBaseProps } from './rightReply';
import {  Modal } from 'antd';
import { WeaTab, WeaLocaleProvider, WeaNewScroll } from 'ecCom';
import SearchInput from './search-input';
import RightReplyItem from './rightReplyItem';
import RightReplyAdd from './rightReplyAdd';
import jQuery from 'jquery';
const getLabel = WeaLocaleProvider.getLabel;
const confirm = Modal.confirm;
let num = 0;

@observer
export default class RightReplyContent extends React.Component<RightReplyBaseProps, any> {
    constructor(props) {
        super(props);
        const { reply } = this.props;
        reply.scrollBottom = this.doScrollBottom;
        reply.getScrollTop = this.getScrollTop;
    }

    componentDidMount() {
        this.doScrollBottom();
    }

    doScrollBottom = () => {
        let contentScroll = this.refs.cubeReplyScroll;
        if (contentScroll && num < 100) {
            if (contentScroll["scroll"]) {
                num = 0;
                const { reply } = this.props;
                if (reply.replyAdd.okClickType == 'new' || reply.replyAdd.okClickType == 'quote') {//新建或者引用
                    contentScroll["scrollToLast"]();
                } else {
                    let h = jQuery("#cubeReplyContentScroll .wea-new-scroll .scroller")[0].scrollHeight;
                    let scrollTop: any = reply.scrollTop;
                    let top: any = h - scrollTop;
                    if (top < 0) {
                        top = 0;
                    }
                    contentScroll["scroll"](top);
                }
                reply.replyAdd.okClickType = '';
            } else {
                num++
                let doScrollBottom = this.doScrollBottom.bind(this);
                setTimeout(function () {
                    doScrollBottom();
                }, 100)
            }

        }
    }

    onScrollNext = () => {
        const { reply } = this.props;
        const { current, pagecount } = reply;
        if (current < pagecount) {
            let contentScroll = this.refs.cubeReplyScroll;
            let scrollTop = 0;
            if (contentScroll) {
                scrollTop = contentScroll["getScrollTop"]();
            }
            if (scrollTop == 0) {
                this.loadNextPage();
            }
        }
    }

    getScrollTop = () => {
        let scrollTop = 0;
        let contentScroll = this.refs.cubeReplyScroll;
        if (contentScroll) {
            scrollTop = contentScroll["getScrollTop"]();
        }
        let top = jQuery("#cubeReplyContentScroll .wea-new-scroll .scroller").prevObject["context"]["children"]["0"].scrollHeight - scrollTop;
        return top;
    }

    loadNextPage = () => {
        const { reply } = this.props;
        reply.loadNextPage();
    }

    deleteReply = (tiem) => {
        const { reply } = this.props;
        confirm({
            title: getLabel(387329, '确定要删除这个评论吗？'),
            onOk: () => {
                reply.delete(tiem);
            },
            onCancel() { },
        });
    }


    getRelpyList = () => {
        const { reply } = this.props;
        let arr = new Array();
        const { current, pagecount } = reply;
        const length = reply.replyList.slice().length;
        if (current < pagecount) {
            arr.push(<div onClick={() => this.loadNextPage()} className="cube-reply-showmore"><i className='icon-coms-overtime' /> {getLabel('-81408', "查看更多")}</div>);
        }
        let index = reply.replyList.length;
        let pageIndex = 0;
        for (let i = 0; i < reply.dateList.length; i++) {
            let date = reply.dateList[i];
            arr.push(<div className="cube-reply-date-split">{date}</div>);
            for (let j = 0; j < reply.replyList.length; j++) {
                let item = reply.replyList[j];
                if (item.replydate == date) {
                    if (index % 20 == 0) {
                        pageIndex++;
                        arr.push(<div id={"cube-reply-page" + pageIndex}></div>);
                    }

                    arr.push(<RightReplyItem
                        item={item}
                        edit={reply.edit}
                        delete={this.deleteReply.bind(this)}
                        like={reply.like}
                        unlike={reply.unlike}
                        reference={reply.referenceRight}
                        about={reply.aboutRight}
                        isLast={length == j + 1}
                    />);

                    index++;
                }
            }
        }

        return arr;
    }

    render() {
        const { reply, h } = this.props;
        const length = reply.replyList.slice().length;
        let height = reply.showRichText ? h - 50 - 270 : h - 92 ;
        return (
            <div className="cube-reply-content" id="cube-reply-content" style={{ minHeight: 500,position:"relative" }}>
                <div className="cube-reply-list-wrap">
                    <WeaTab
                        selectedKey={reply.selectedKey}
                        datas={reply.tabDatas}
                        keyParam='key'
                        onChange={reply.changeTab}
                        buttons={this.getTabButtons()}
                    />
                    <div id="cubeReplyContentScroll">
                        <WeaNewScroll ref="cubeReplyScroll" height={height} onScroll={() => this.onScrollNext()} >
                            {length == 0 ?
                                <div className="cube-reply-list-placeholder">{getLabel(83553, '暂无数据')}</div>
                                :
                                this.getRelpyList()
                            }
                        </WeaNewScroll>
                    </div>
                    <WeaNewScroll  height={reply.showRichText? 270 :""}>
                        <div id="remark_div" className={`${"creply-right-container "}`}>
                            <div className='cube-sign-input'
                                style={{
                                    background:reply.showRichText ?"#F9F8F7": "#ffffff",
                                    border:  "1px solid #E2E2E2",
                                    borderLeft:  "1px solid #E2E2E2",
                                    cursor: reply.showRichText ?"auto":"pointer" ,
                                }}
                                onClick={()=>reply.isShowAddReplyText(true)}
                            >
                                <i className="icon-coms-Need-feedback cube-sign-input-icon"  />
                                <span style={{ color:  "#333333",lineHeight:"40px" }}>{getLabel(20009, '发表评论')}</span>
                                <span style={{  marginLeft: "10px",display:"inline-block" }} dangerouslySetInnerHTML={{ __html: reply.replyAdd.optdesc }}></span>
                                <span style={{ marginLeft: "15px" }}></span>
                            </div>
                            <div>
                                {reply.showRichText ? 
                                    <RightReplyAdd replyAdd={reply.replyAdd} params={reply.params} key="replyaddright" editorId="replyaddright" />
                                    :""}
                            </div>
                        </div>
                        {/* <div className="cube-reply-optdesc" dangerouslySetInnerHTML={{ __html: reply.replyAdd.optdesc }}></div>
                        <RightReplyAdd replyAdd={reply.replyAdd} params={reply.params} key="replyaddright" editorId="replyaddright" />
                         <div className="cube-reply-button">
                            <Button loading={reply.replyAdd.loading} onClick={reply.replyAdd.onOk}>{getLabel(615, '提交')}</Button>
                        </div> */}
                    </WeaNewScroll >
                </div>
            </div>
        )
    }
    getSearchs = () => {

    }
    getTabButtons = () => {
        const { reply } = this.props;
        return [(<SearchInput reply={reply} />)]
    }
}
